<template>
<div class="navbar">
  <img src="../assets/img/logo.png" alt="">
  <ul>
    <router-link :to="{path:'/index'}"><li @click="changePage(0)" :class="{'blueBackground':active==0}">网站首页</li></router-link>
    <router-link :to="{path:'/platform'}"><li @click="changePage(1)" :class="{'blueBackground':active==1}">平台资源</li></router-link>
    <router-link :to="{path:'/scienceT'}"><li @click="changePage(2)" :class="{'blueBackground':active==2}">科学技术</li></router-link>
    <router-link :to="{path:'/education'}"><li @click="changePage(3)" :class="{'blueBackground':active==3}">教育咨询</li></router-link>
    <router-link :to="{path:'/news'}"><li @click="changePage(4)" :class="{'blueBackground':active==4}">资讯中心</li></router-link>
    <router-link :to="{path:'/platform'}"><li @click="changePage(5)" :class="{'blueBackground':active==5}">企业中心</li></router-link>
    <router-link :to="{path:'/index'}"><li @click="changePage(6)" :class="{'blueBackground':active==6}">公告栏</li></router-link>
  </ul>
</div>
</template>

<script>
export default {
  data(){
    return{
      active: 0
    }
  },
  methods:{
    changePage(value){
      this.active = value
    }
  }
}
</script>
<style lang="stylus" scoped>
.TopNavBar{width: 100%;background: #444444;}
.TopNavBar-inner{max-width:90%;margin: 0 auto;}
.TopNavBar-inner img{padding: 9px 0;}
.TopNavBar-inner nav ul{margin-right: 60px;font-size: 13px;}
.TopNavBar-inner nav ul li{float: left;margin-left: 30px;color: #ccc;line-height: 30px;padding: 10px 0;}
.TopNavBar-inner nav ul li a:hover{color: #fff;}







a{text-decoration:none}
.navbar{
  box-shadow: 0 0 24px -6px rgba(0,0,0,.2)!important;
  position fixed
  top: 0;
  background #FFFFFF
  z-index 1000
  height 100px
  width 100%
  display flex
  flex-direction row
  align-items center
  justify-content space-between
  img{   
    margin-left 100px
    height 100px
  }
  ul{
    height 100px
    margin-right 100px
    display flex
    flex-direction row
    align-items center
    li{
      width:150px;
      line-height 100px
      text-align center
      font-size:26px;
      font-family:SourceHanSansSC;
      font-weight:bold;
      color #000000
    }
  }
}
.blueBackground{
  background:rgba(72,111,240,1);
  color #F2F4FD !important;
}

</style>